<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root" :x="n">
        <h2>n的值为{{n}}</h2>
        <button @click="add">+1</button>
    <button @click="bye">点我销毁vm</button>
</div>

</body>
<script type="text/javascript">
    Vue.config.productionTip=false
    new Vue({
        el:"#root",
        data:{
            n:1
        },
        methods:{
            add(){
                this.n++
            },
            bye(){
                console.log('bye')
                this.$destroy()
            }
        },
        beforeCreate(){
            console.log(' beforeCreate')
        },
        created(){
            console.log('created')
        },
        beforeMount(){
            console.log('beforeMount')
        },
        mounted(){
            console.log('mounted')
        },
        updated(){
            console.log('updated')
        },
        beforeDestroy(){
            console.log(' beforeDestroy')
        },
        destroyed(){
            console.log('destroyed')
        }

    })
</script>
</html>